import {
  Input,
  Select,
  InputNumber,
  Button,
  Radio,
  Checkbox,
  Modal,
  Table,
  Popconfirm,
  Menu,
  Dropdown,
  Icon,
} from 'antd';
import { connect } from 'net';

const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;

export default class SelectMatchForm extends React.Component {
  state = {};

  okHandle = item => {
    const { handleAdd } = this.props;
    handleAdd(item);
  };

  getTitle = () => {
    return '选择裁判';
  };

  close = () => {
    const { handleModalVisible } = this.props;
    handleModalVisible();
  };

  handleMenuClick = (value, item) => {
    item.caipanRole = value.key;
    this.okHandle(item);
    //this.close();
  };

  menu = item => (
    <Menu onClick={value => this.handleMenuClick(value, item)}>
      <Menu.Item key="umpire">
        <Icon type="user" />
        主裁
      </Menu.Item>
      <Menu.Item key="s-judge">
        <Icon type="user" />
        发球裁判
      </Menu.Item>
      <Menu.Item key="t-judge">
        <Icon type="user" />
        司线裁判
      </Menu.Item>
    </Menu>
  );

  render() {
    const { modalVisible, caipanList } = this.props;
    const columns3 = [
      {
        title: '名称',
        width: 150,
        dataIndex: 'nickName',
      },
      {
        title: '电话',
        dataIndex: 'tel',
        width: 200,
      },
      {
        title: '角色',
        dataIndex: 'caipanRole',
        render: text => (
          <span>
            {text === 'umpire'
              ? '主裁'
              : text === 's-judge'
                ? '发球裁判'
                : text === 't-judge'
                  ? '司线裁判'
                  : ''}
          </span>
        ),
      },
      {
        title: '选择',
        width: 100,
        render: (value, item) => (
          <Dropdown overlay={this.menu(item)}>
            <Button style={{ marginLeft: 8 }}>
              选择为 <Icon type="down" />
            </Button>
          </Dropdown>
        ),
      },
    ];

    return (
      <Modal
        title={this.getTitle()}
        width={1000}
        visible={modalVisible}
        onOk={() => this.close()}
        onCancel={() => this.close()}
        maskClosable={false}
      >
        <div style={{ marginBottom: 30 }}>
          <Table dataSource={caipanList} pagination={false} size="small" columns={columns3} />
        </div>
      </Modal>
    );
  }
}
